import { getRoleApi } from "@/api/role";
import { addUserApi, getUserApi, uploadUserApi } from "@/api/user";
import { DeleteOutlined, EllipsisOutlined, FormOutlined, PlusOutlined } from "@ant-design/icons";
import { ActionType, ModalForm, ProColumns, ProFormColorPicker, ProFormSelect, ProFormText, ProTable, TableDropdown } from "@ant-design/pro-components";
import { useRequest } from "ahooks";
import { Button, Dropdown, Form, Space, Tag, message } from "antd";
import { useEffect, useRef, useState } from "react";
import dayjs from 'dayjs'
import { addAnnoTypeApi, deleAnnoTypeApi, getAnnoTypeApi, uploadAnnoTypeApi } from "@/api/anno";

const AnnoTypeList = () => {
    type GithubIssueItem = {
        _id:string,
        label:string,
        value:1
        color:string
    }

    const [roleList, setRoleList] = useState<roleTypes[]>([])
    const getRole = useRequest(getRoleApi, {
        onSuccess: (res) => {
            setRoleList(res.result)
        }
    })
    const dele = useRequest(deleAnnoTypeApi,{
        manual:true,
        onSuccess:(res)=>{
            actionRef.current?.reload()
        }
    })
    const [form] = Form.useForm<any>();
    const columns: ProColumns<GithubIssueItem>[] = [
        {
            dataIndex: 'index',
            valueType: 'indexBorder',
            width: 48,
            title: '序号'
        },
        {
            title: '公告标识',
            dataIndex: '_id',
            copyable: true,
            ellipsis: true,
            search:false
        },
        {
            disable: true,
            title: '公告标题',

            dataIndex: 'label',
        },
        {
            disable: true,
            title: '公告等级',
            dataIndex: 'value',
            search:false
            //   render: (_, record) => (
            //     <Space>
            //       {record.labels.map(({ name, color }) => (
            //         <Tag color={color} key={name}>
            //           {name}
            //         </Tag>
            //       ))}
            //     </Space>
            //   ),
        },
        {
            disable: true,
            title: '公告属性',
            dataIndex: 'color',
            search: false,
            render:(_,record)=>(
                <Space>
                <ProFormColorPicker
                    disabled
                    width="xs"
                    name={record._id}
                    value={record.color}
                />
                </Space>
            )
        },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            render: (text, record, _, action) => [
                <div>
                    <ModalForm<{
                        color:string,
                        label:string,
                        value:number
                    }>
                        title={'用户管理'}
                        trigger={
                            <Button type="primary" danger shape="circle" icon={<FormOutlined />} size='middle' onClick={() => form.setFieldsValue(record)} style={{ marginRight: '10px' }} />
                        }
                        width={300}
                        form={form}
                        autoFocusFirstInput
                        modalProps={{
                            destroyOnClose: true,
                            onCancel: () => console.log('run'),
                        }}
                        onFinish={async (values) => {
                            let res = await uploadAnnoTypeApi(values.label,values.color,form.getFieldValue("_id"))
                            actionRef.current?.reload()
                            
                            message.success('提交成功');
                            return true;
                        }}
                    >
                        <ProFormText width="sm" name="label" label="标题" />
                        <ProFormColorPicker
                            width="xs"
                            name="color"
                            label="选择颜色"
                            
                        />

                    </ModalForm>

                    <Button type="primary" shape="circle" icon={<DeleteOutlined />} size='middle' onClick={()=>dele.run(record._id)} />
                </div>
            ],
        },
    ];
    const actionRef = useRef<ActionType>();
    return (
        <ProTable<GithubIssueItem>
            columns={columns}
            actionRef={actionRef}
            cardBordered
            request={async (params = {}, sort, filter) => {
                let res = await getAnnoTypeApi(params.label)
                return {
                    data: res.result as any
                }
            }}
            editable={{
                type: 'multiple',
            }}
            columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
                onChange(value) {
                    console.log('value: ', value);
                },
            }}
            rowKey="id"
            search={{
                labelWidth: 'auto',
            }}
            options={{
                setting: {
                    listsHeight: 400,
                },
            }}
            form={{
                // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                syncToUrl: (values, type) => {
                    if (type === 'get') {
                        return {
                            ...values,
                            created_at: [values.startTime, values.endTime],
                        };
                    }
                    return values;
                },
            }}
            pagination={{
                pageSize: 5,
                onChange: (page) => console.log(page),
            }}
            dateFormatter="string"
            headerTitle="公告列表"
            toolBarRender={() => [
                <ModalForm<{
                        color:string,
                        label:string,
                        value:number
                }>
                    title={'公告管理'}
                    trigger={
                        <Button type="primary"  size='middle' onClick={() => {form.setFieldsValue({})}} >                        <PlusOutlined />
                        新建公告</Button>
                    }
                    width={300}
                    form={form}
                    autoFocusFirstInput
                    modalProps={{
                        destroyOnClose: true,
                        onCancel: () => console.log('run'),
                    }}
                    onFinish={async (values) => {
                        let res = await addAnnoTypeApi(values.label,values.value,values.color)
                        actionRef.current?.reload()
                        message.success('提交成功');
                        return true;
                    }}
                >
                        <ProFormText width="sm" name="label" label="标题" />
                        <ProFormText width="sm" name="value" label="权重" />
                        <ProFormColorPicker
                            width="xs"
                            name="color"
                            label="选择颜色"
                            
                        />

                </ModalForm>,


            ]}
        />
    );
}

export default AnnoTypeList